<template>
	<div class="scroll-y" ref="scroll-y">
		<div>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		props: {

			probeType: {
				type: Number,
				default: 1
			},
			click: {
				type: Boolean,
				default: true
			},
			scrollX: {
				type: Boolean,
				default: false

			},
			scrollY: {
				type: Boolean,
				default: true

			},
			lowerThreshold: {
				type: Number,
				default: 50
			},

			listenScroll: {
				type: Boolean,
				default: false
			},
			refName: {
				type: String,
				default: 'scroll-y'
			},
			data: {
				type: Array,
				require: true
			}
		},
		watch:{
			data(){
				this.refresh()
			}
		},
		mounted() {
			this.$nextTick(() => {
				this._initScroll();
			});

		},
		methods: {
			refresh() {
				this.scroll && this.scroll.refresh()
			},
			_initScroll() {
				var _this = this;
				if(!this.$refs["scroll-y"]) {
					return
				}
				this.scroll = new BScroll(this.$refs["scroll-y"], {
					probeType: this.probeType,
					click: this.click,
					scrollY: this.scrollY
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.scroll-y {
		overflow: hidden;
	}
</style>